<template>
    <div 
    id="son"
    @mousedown="move" 
    :style="{'left':positionx+'px','top':positiony+'px'}">
        <p>元素可移动</p>
        {{positionx}}
        {{positiony}}
    </div>
</template>

<script>
export default {
  name: 'movetest',//在画布内移动矩形   https://blog.csdn.net/weixin_39090097/article/details/82385986?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.compare&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.compare
  props:{
    sidewidth:{
        type:Number,
        default:200
    }
  },
  data () {
      return {
          positionx:0,//移动元素初始位置
          positiony:0,
      }
  },
  methods: {
      move(e) {
          let odiv = e.target;//获取目标元素
          console.log(e.clientX,e.clientY);//鼠标位置
          console.log(odiv.offsetLeft,odiv.offsetTop);//目标元素位置。元素边框外侧到父元素边框内侧的距离。如果父元素没有设置position属性就是到body边框外侧的距离  所以此处是0 0
          //按下鼠标时，开始拖动时，x y 为鼠标接触点与元素的相对距离。在一次拖拽中。鼠标按下和抬起之间x y距离是保持不变的
          let x = e.clientX - odiv.offsetLeft;//鼠标相对点击元素的位置dist =鼠标位置-元素相对外层元素的位置
          let y = e.clientY - odiv.offsetTop;
          console.log(x,y);
          //拖动过程中，left top为被拖拽元素的位置
          document.onmousemove = (ev) => {//当画布被点击并且鼠标按下后在画布上发生移动时，
              let left = ev.clientX - x;//任意移动时刻鼠标的位置 - 鼠标相对点击元素的位置dist = 任意移动时刻元素的实时位置
              let top = ev.clientY - y;
              //将拖拽元素放到当前位置
              if(left <= 0) {
                  left = 0;
              }
              else if(left >= document.documentElement.clientWidth - odiv.offsetWidth) {
                  left = document.documentElement.clientWidth - odiv.offsetWidth;
              }
              else if(left >= 1500) {
                  left = 1500;
              }
              if(top <= 0) {
                  top = 0;
              }
              else if(top >= document.documentElement.clientHeight - odiv.offsetHeight) {
                  top = document.documentElement.clientHeight - odiv.offsetHeight;
              }
              else if(top >= 700) {
                    top = 700;
              }
              this.positionx = left;//将实时坐标赋值给盒子，使盒子跟随鼠标拖动而移动
              this.positiony = top;
              let val = {
                val1:this.positionx,
                val2:this.positiony
              }
              this.$emit('func',val)//子传父
          }
          //拖动结束时，
          document.onmouseup = (e) => {
            let left = e.clientX - x;
            if(left <= this.sidewidth) {//鼠标抬起时判断左侧，只能在画布上移动
                left = this.sidewidth;
                this.positionx = left;
                document.onmousemove = null;
                document.onmouseup = null;
            }else {
                document.onmousemove = null;
                document.onmouseup = null;
            }
            // document.onmousemove = null;
            // document.onmouseup = null;
          }
      }
  }
}
</script>

<style scoped>
#son {
    width: 100px;
    height: 100px;
    background:rgb(241, 186, 186);
    position: absolute;
    /* top: 0; */
    /* left: 0; */
}
</style>